<style lang="scss" src="./index.scss" scoped></style>
<template>
    <page-box class="form">
        <template v-slot:header>
            <ask-breadcrumb>
                <template v-for="(item, index) in $getBreadCrumbsName($route.path)">
                    <ask-breadcrumb-item :key="index" v-if="item.path" :to="'/' + item.path">{{ item.meta.title }}</ask-breadcrumb-item>
                    <ask-breadcrumb-item :key="index" v-else>{{ item.meta.title }}</ask-breadcrumb-item>
                </template>
                <ask-breadcrumb-item name="ModuleManageQuery"></ask-breadcrumb-item>
            </ask-breadcrumb>
            <page-toolbar>
                <el-button v-if="_isTownPage" @click="sendTask">下发</el-button>
                <el-button
                    @click="changeType"
                    type="primary">
                    {{ previewType === "form" ? "切换为表格预览" : "切换为表单预览"}}
                </el-button>
                 <el-button
                    @click="edit"
                    v-if="_canEdit"
                    type="info">
                    编辑
                </el-button>
                <el-button plain @click="goBack">关闭</el-button>
            </page-toolbar>
        </template>
        <main class="form-main">
            <section class="form-drag-box">
                <div class="form-main__body">
                    <ask-empty-text v-if="model.items.length === 0"></ask-empty-text>
                    <preview-list
                        v-else
                        :preview-type="previewType"
                    >
                    </preview-list>
                    <!-- <footer class="form-main__body-footer">
                        <el-button plain @click="goBack">返回</el-button>
                    </footer> -->
                </div>
            </section>
        </main>
    </page-box>
</template>

<script lang="ts">
import { Component, Mixins } from "vue-property-decorator";
import { State } from 'vuex-class';
import FormMixin from "../form/form.mixin";
import PreviewList from "../components/preview-template/index.vue";
// const mock = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

@Component({
    name: "ModuleManageQueryNotAlive",
    components: {
        PreviewList
    }
})
export default class ModuleManageQuery extends Mixins(FormMixin) {
    @State(state => state.authArea) authArea: any;
    // 当前用户所处层级菜单
    get userLevel() {
        return this.$getUserLevel(this.authArea ? this.authArea.orgCategoryId || "" : "");
        // return this.$getUserLevel("6");
    }

    get _isOperationPage() {
        return this.$route.name === "OperationModuleManageQuery";
    }

    get _isTownAdminPage() {
        return this.$route.name === "TownAdminModuleManageQuery";
    }

    get _isTownPage() {
        return this.$route.name === "TownModuleManageQuery";
    }

    get _canEdit() {
        return (this.templateType === "custom" && this._isTownAdminPage) || (this.templateType === "all" && this._isOperationPage);
    }

    previewType = "table";
    templateType = "custom";
    mounted() {
        const { type }: any = this.$route.params;
        this.templateType = type;
    }

    changeType() {
        this.previewType = this.previewType === "table" ? "form" : "table";
    }

    edit() {
        this.$router.push({
            name: this._isOperationPage ? "ModuleManageNormOperationForm" : "ModuleManageNormForm",
            query: {
                id: this.model.id
            }
        });
    }

    async sendTask() {
        const response = await this.$server["moduleManage/form/startFlow"]({
            data: {
                processId: this.$route.query.processId,
                formId: this.$route.query.id
            }
        });
        if (response.data.code === 200) {
            this.$message({
                message: "下发成功",
                type: 'success',
                duration: 1500
            });
            this.resetInterceptRouter(() => {
                this.goBack();
            });
        } else {
            this.$message.error(response.data.message || "接口请求错误!");
        }
    }
}
</script>
